draw.js ➔ define - Code Metrics - Inspection of "[WIP] [TASK] rewrite forcegraph with d3 version 4" - ffrgb/meshviewer - Measure and Improve Code Quality continuously with Scrutinizer

Completed

Pull Request — develop (#75)

unknown

created 2017-02-25 13:05 UTC

draw.js ➔ define B

↳ Parent: lib/forcegraph/draw.js

Complexity

Conditions	1
Paths	12

Size

Total Lines

106

Duplication

Lines	0
Ratio	0 %

Importance

Changes	1
Bugs	0	Features	0

Metric	Value
cc	1
c	1
b	0
f	0
nc	12
dl	0
loc	106
rs	8.2857
nop	1

8 Functions

Rating	Name	Size	Complexity
A	draw.js ➔ ... ➔ setTransform	3	1
A	draw.js ➔ ... ➔ setHighlight	3	1
A	draw.js ➔ ... ➔ drawNode	19	4
A	draw.js ➔ ... ➔ drawHighlightNode	8	4
A	draw.js ➔ ... ➔ drawDetailNode	16	4
A	draw.js ➔ ... ➔ setCTX	3	1
A	draw.js ➔ ... ➔ drawHighlightLink	10	4
A	draw.js ➔ ... ➔ drawLink	18	4

How to fix Long Method

'use strict';

define(['helper'], function (helper) {
  var self = this;

  var ctx;
  var transform;

  var highlight;

  const nonUplinkColor = '#F2E3C6';
  const locationColor = '#00ff00';
  const noLocationColor = '#0000ff';
  const clientColor = 'rgba(230, 50, 75, 1.0)';

  const cableColor = '#50B0F0';
  const highlightColor = 'rgba(255, 255, 255, 0.2)';

  const NODE_RADIUS = 15;
  const LINE_RADIUS = 12;

  function drawDetailNode(d) {
    if (transform.k > 1) {
      ctx.beginPath();
      helper.positionClients(ctx, d, Math.PI, d.o.node.statistics.clients, 15);
      ctx.fillStyle = clientColor;
      ctx.fill();
      ctx.beginPath();
      var name = d.o.node_id;
      if (d.o.node && d.o.node.nodeinfo) {
        name = d.o.node.nodeinfo.hostname;
      }
      ctx.textAlign = 'center';
      ctx.fillStyle = '#fff';
      ctx.fillText(name, d.x, d.y + 20);
    }
  }

  function drawHighlightNode(d) {
    if (highlight && highlight.type === 'node' && d.o.node === highlight.o) {
      ctx.arc(d.x, d.y, NODE_RADIUS * 1.5, 0, 2 * Math.PI);
      ctx.fillStyle = highlightColor;
      ctx.fill();
      ctx.beginPath();
    }
  }

  function drawHighlightLink(d) {
    if (highlight && highlight.type === 'link' && d.o === highlight.o) {
      ctx.lineTo(to[0], to[1]);
      ctx.strokeStyle = highlightColor;
      ctx.lineWidth = LINE_RADIUS * 2;
      ctx.lineCap = 'round';
      ctx.stroke();
      to = [d.source.x, d.source.y];

    }
  }

  self.drawNode = function drawNode(d) {
    ctx.beginPath();

    drawHighlightNode(d);

    ctx.moveTo(d.x + 3, d.y);
    ctx.arc(d.x, d.y, 6, 0, 2 * Math.PI);
    ctx.fillStyle = noLocationColor;
    if (d.o.node && d.o.node.nodeinfo && d.o.node.nodeinfo.location) {
      ctx.fillStyle = locationColor;
    }
    ctx.strokeStyle = nonUplinkColor;
    ctx.lineWidth = 5;
    ctx.globalAlpha = 1;
    ctx.fill();
    ctx.stroke();

    drawDetailNode(d);
  };

  self.drawLink = function drawLink(d) {
    ctx.beginPath();
    ctx.moveTo(d.source.x, d.source.y);
    var to = [d.target.x, d.target.y];

    drawHighlightLink(d);

    ctx.lineTo(to[0], to[1]);
    ctx.strokeStyle = d.o.type === 'Kabel' ? cableColor : d.color;
    if (d.o.type === 'fastd' || d.o.type === 'L2TP') {
      ctx.globalAlpha = 0.2;
      ctx.lineWidth = 1.5;
    } else {
      ctx.globalAlpha = 0.8;
      ctx.lineWidth = 2.5;
    }
    ctx.stroke();
  };

  self.setCTX = function setCTX(newValue) {
    ctx = newValue;
  };
  self.setHighlight = function setHighlight(newValue) {
    highlight = newValue;
  };
  self.setTransform = function setTransform(newValue) {
    transform = newValue;
  };
  return self;
});


1			'use strict';
2
3			define(['helper'], function (helper) {
4			var self = this;
5
6			var ctx;
7			var transform;
8
9			var highlight;
10
11			const nonUplinkColor = '#F2E3C6';
12			const locationColor = '#00ff00';
13			const noLocationColor = '#0000ff';
14			const clientColor = 'rgba(230, 50, 75, 1.0)';
15
16			const cableColor = '#50B0F0';
17			const highlightColor = 'rgba(255, 255, 255, 0.2)';
18
19			const NODE_RADIUS = 15;
20			const LINE_RADIUS = 12;
21
22			function drawDetailNode(d) {
23			if (transform.k > 1) {
24			ctx.beginPath();
25			helper.positionClients(ctx, d, Math.PI, d.o.node.statistics.clients, 15);
26			ctx.fillStyle = clientColor;
27			ctx.fill();
28			ctx.beginPath();
29			var name = d.o.node_id;
30			if (d.o.node && d.o.node.nodeinfo) {
31			name = d.o.node.nodeinfo.hostname;
32			}
33			ctx.textAlign = 'center';
34			ctx.fillStyle = '#fff';
35			ctx.fillText(name, d.x, d.y + 20);
36			}
37			}
38
39			function drawHighlightNode(d) {
40			if (highlight && highlight.type === 'node' && d.o.node === highlight.o) {
41			ctx.arc(d.x, d.y, NODE_RADIUS * 1.5, 0, 2 * Math.PI);
42			ctx.fillStyle = highlightColor;
43			ctx.fill();
44			ctx.beginPath();
45			}
46			}
47
48			function drawHighlightLink(d) {
49			if (highlight && highlight.type === 'link' && d.o === highlight.o) {
50			ctx.lineTo(to[0], to[1]);
51			ctx.strokeStyle = highlightColor;
52			ctx.lineWidth = LINE_RADIUS * 2;
53			ctx.lineCap = 'round';
54			ctx.stroke();
55			to = [d.source.x, d.source.y];
			0 ignored issues – show Bug introduced 2017-02-25 13:06 UTC by Report Bug Copy Issue Report The variable `to` seems to be never declared. Assigning variables without defining them first makes them global. If this was intended, consider making it explicit like using `window.to`. Loading history...
56			}
57			}
58
59			self.drawNode = function drawNode(d) {
60			ctx.beginPath();
61
62			drawHighlightNode(d);
63
64			ctx.moveTo(d.x + 3, d.y);
65			ctx.arc(d.x, d.y, 6, 0, 2 * Math.PI);
66			ctx.fillStyle = noLocationColor;
67			if (d.o.node && d.o.node.nodeinfo && d.o.node.nodeinfo.location) {
68			ctx.fillStyle = locationColor;
69			}
70			ctx.strokeStyle = nonUplinkColor;
71			ctx.lineWidth = 5;
72			ctx.globalAlpha = 1;
73			ctx.fill();
74			ctx.stroke();
75
76			drawDetailNode(d);
77			};
78
79			self.drawLink = function drawLink(d) {
80			ctx.beginPath();
81			ctx.moveTo(d.source.x, d.source.y);
82			var to = [d.target.x, d.target.y];
83
84			drawHighlightLink(d);
85
86			ctx.lineTo(to[0], to[1]);
87			ctx.strokeStyle = d.o.type === 'Kabel' ? cableColor : d.color;
88			if (d.o.type === 'fastd' \|\| d.o.type === 'L2TP') {
89			ctx.globalAlpha = 0.2;
90			ctx.lineWidth = 1.5;
91			} else {
92			ctx.globalAlpha = 0.8;
93			ctx.lineWidth = 2.5;
94			}
95			ctx.stroke();
96			};
97
98			self.setCTX = function setCTX(newValue) {
99			ctx = newValue;
100			};
101			self.setHighlight = function setHighlight(newValue) {
102			highlight = newValue;
103			};
104			self.setTransform = function setTransform(newValue) {
105			transform = newValue;
106			};
107			return self;
108			});
109

ffrgb / meshviewer

Pull Request — develop (#75)

draw.js ➔ define B

Complexity

Size

Duplication

Importance

8 Functions

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like